<template>
	<view style="height: 100vh;">
		<view class="cu-bar bg-white search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="keyWord" type="text" placeholder="请输入品牌" confirm-type="search" />
			</view>
			<view class="action">
				<button class="cu-btn shadow-blur round">搜索</button>
			</view>
		</view>
		<template v-if="keyWord">
			<template v-if="searchList.length === 0">
				<view class="empty">
					未查询到此品牌~
				</view>
			</template>
			<template v-else>
				<view class="cu-list menu-avatar" style="padding-top: 100rpx;">
					<view class="item" v-for="(items,sub) in searchList" :key="sub" @click="handChoose(items)">
						<view class="content">
							<view class="text-grey">{{items.name}}
							</view>
						</view>
					</view>
				</view>
			</template>

		</template>
		<template v-else>
			<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID"
				:style="[{height:'calc(100vh - 0px)'}]" :scroll-with-animation="true" :enable-back-to-top="true">
				<block v-for="(item,index) in list" :key="index">
					<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
						<view class="padding">{{item.name}}</view>
						<view class="cu-list menu-avatar no-padding">
							<view class="item" v-for="(items,sub) in item.data" :key="sub" @click="handChoose(items)">
								<view class="content">
									<view class="text-grey">{{items.name}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="indexBar" :style="[{height:'calc(100vh - 0px)'}]">
				<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
					<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index"
						@touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
				</view>
			</view>
			<!--选择显示-->
			<view v-show="!hidden" class="indexToast">
				{{listCur}}
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		doBrandList
	} from '@/apis/system.js'
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app";
	import {
		ref,
		computed,
		nextTick,
		getCurrentInstance,
		inject
	} from 'vue'

	const $back = inject('$back')

	const {
		proxy
	} = getCurrentInstance();
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	const useStore = useAppsStore()
	const {
		setLocation
	} = useStore
	const list = ref([])
	const listCur = ref({})
	const listCurID = ref('')
	let boxTop = 0
	let movableY = 0

	const handChoose = (e) => {
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.emit('someEvent', e);
		$back()
	}

	let hidden = ref(true)
	const getCur = (e) => {
		hidden.value = false
		listCur.value = list.value[e.target.id].name
	}
	const setCur = (e) => {
		hidden.value = true
		listCur.value = listCur.value
	}

	const tMove = (e) => {
		let y = e.touches[0].clientY,
			offsettop = boxTop;
		//判断选择区域,只有在选择区才会生效
		if (y > offsettop) {
			let num = parseInt((y - offsettop) / 20);
			listCur.value = list.value[num].name
		};
	}

	const tStart = () => {
		hidden.value = false
	}

	const tEnd = () => {
		hidden.value = true
		listCurID.value = listCur.value
	}

	const keyWord = ref('')
	const searchList = computed(() => {
		if (keyWord.value) {
			const arr = uni.$uv.deepClone(list.value).map(el => {
				return el.data
			}).flat().filter(el => {
				return (el.name == keyWord.value || el.name.indexOf(keyWord.value) !== -1)
			})
			return arr
		}
		return []
	})

	onLoad(async (e) => {
		let arr = [{}];
		for (let i = 0; i < 26; i++) {
			arr[i] = {};
			arr[i].name = String.fromCharCode(65 + i);
		}

		const data = await doBrandList()
		arr.map(el => {
			el.data = data.filter(item => {
				const firstName = (item.initial.charAt(0)).toUpperCase()
				return el.name == firstName
			})
			return el
		})
		list.value = arr
		listCur.value = arr[0].name
		nextTick(() => {
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				boxTop = res.top
			}).exec();
		})
	})
</script>

<style lang="scss" scoped>
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
		padding-top: 80rpx;
	}

	.cu-btn {
		background-color: #EDAF32 !important;
		color: #fff !important;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

	.cu-list {
		background-color: #fff;
		padding: 0 20rpx;
	}

	.cu-list .item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.empty {
		background-color: #fff;
		text-align: center;
		padding-top: 200rpx;
		color: gray;
	}
</style>